<template>
	<view :style="$theme.pageStyle">

		<view class="head">
			<view class="aui-head-box">
				<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/571694064297R9NsKR.png">
				</image>
				<view class="tit">
					{{Payinfo.real_name}} 律师的私人法律顾问
				</view>
				<view class="tits">
					有效期 {{privateData.time}} 天
				</view>
			</view>
		</view>

		<view class="contents">
			<view class="top_a">
				<view class="left_a">
					<view class="price_box">
						<span style="font-size: 14px;margin-right: 5px;">¥</span> <span>{{privateData.content}}</span>
					</view>
					<!-- <view class="title_box">
						<span>{{privateData.type}} 无限制提问 </span>
					</view> -->
					<view class="desc_box" style="margin-top: 5px;">
						<span>{{privateData.type}} 无限制提问</span>
					</view>
				</view>
				<view class="right_a">

				</view>
			</view>
			<view class="con_item">
				<view class="quanyi">
					<span style="margin-right: 10px;">
						<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/4216940682421pOiDG.png"
							mode=""></image>
					</span> 详情
					<span style="margin-left: 10px;">
						<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/4216940682421pOiDG.png"
							mode=""></image>
					</span>
				</view>
				<view class="card_item_tt">
					<view class="goods_box">
						<view class="goods_title">
							商品名称
						</view>
						<view class="goods_name">
							{{Payinfo.real_name}}律师的私人法律顾问
						</view>
					</view>
					<view class="goods_box">
						<view class="goods_title">
							有效期
						</view>
						<view class="goods_name">
							{{privateData.time}} 天
						</view>
					</view>
					<view class="goods_box">
						<view class="goods_title">
							支持律师
						</view>
						<view class="goods_name" style="display: grid;">
							<span>
								<!-- <uni-icons type="staff-filled" color="#666" size="18"></uni-icons> -->
								<span style="margin-left: 5px;">{{ Payinfo.real_name }}</span>
							</span>
						</view>
					</view>
				</view>



				<view class="pay-type-list" style="margin-top: 20px;">
					<view class="pay-title">请选择支付方式：</view>
					<radio-group class="uni-flex" style="width: 100%;" name="gender">
						<block v-for="(item, index) in payList" :key="index">
							<view class="type-item" :class="{ 'act': index === selectedIndex }"
								@click="selectNav(item,index)">
								<image :src="item.icon" mode="" class="a-img"></image>
								<view class="con">
									<text class="tit">{{item.pay_way_name}}</text>
								</view>
							</view>
						</block>
					</radio-group>
				</view>

				<view class="line">

				</view>



			</view>
		</view>
		<div class="zhanwei"></div>

		<view class="btn">
			<view class="btns">
				<u-button type="primary" size="large" shape="circle" text="支 付" @click="submit()"></u-button>
			</view>
		</view>


	</view>
</template>

<script>
	import $H from '@/common/js/request.js'
	export default {
		data() {
			return {
				timeData: {},
				Payinfo: {},
				pay_way: '',
				id: '',
				count: 5,
				value: 0,
				privateData: uni.getStorageSync('privateData'),
				payList: uni.getStorageSync('pay'),
				selectedIndex: 10,
			}
		},

		onLoad(option) {
			this.id = option.id
			this.getData()
		},

		methods: {
			// //获取数据
			async getData() {
				uni.showLoading();
				try {
					const res = await $H.post('lawyer/lawinfo', {
						id: this.id
					}, {
						token: true
					});
					this.Payinfo = res.data.lawyer;
					uni.hideLoading();
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
			selectNav(item, index) {
				this.selectedIndex = index;
				this.pay_way = item.pay_config_id
				// this.getnavgoods()
			},
			// 选择支付方式
			changePayType(item) {
				this.pay_way = item.pay_config_id
			},
			submit() {

				$H.post('order/CreatePrivateOrder', {
					pay_way: this.pay_way,
					id: this.id,
					privateData: this.privateData
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/order/private/index'
								})
							}, 400)
						} else if (res.data.code == 2) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								appId: res.data.config.appId,
								timeStamp: res.data.config.timeStamp,
								nonceStr: res.data.config.nonceStr,
								package: res.data.config.package,
								signType: res.data.config.signType,
								paySign: res.data.config.paySign,
								success: function(res) {
									//跳转到会话页面
									setTimeout(() => {
										uni.navigateTo({
											url: '/order/private/index'
										})
									}, 400)
								},
								fail: function(err) {
									uni.showToast({
										title: '支付失败',
										duration: 2000
									});
								}
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}

				})
			},

		},
	}
</script>
<style>
	page {
		background-color: #f0f0f0;
	}
</style>
<style lang="scss" scoped>
	.aui-head-box {
		width: 92%;
		margin: 0.8rem auto 0;
		position: relative;
		overflow: hidden;

		image {
			width: 100%;
			height: 183px;
			border-radius: 10px;
		}

		.tit {
			position: absolute;
			margin-left: 19px;
			top: 20px;
			font-size: 25px;
			font-weight: bold;
			color: #fff;
		}

		.tits {
			position: absolute;
			margin-left: 19px;
			top: 60px;
			font-size: 16px;
			color: #fff;
		}
	}

	.contents {
		margin-top: 10px;
		background-color: #fff;
		border-radius: 20px 20px 0px 0px;
		padding: 20px;

		.top_a {
			display: flex;
			justify-content: space-between;

			.left_a {

				.price_box {
					font-size: 32px;
					color: #fa3534;
					font-weight: bold;
				}

				.title_box {
					margin-top: 10px;
					font-size: 22px;
					font-weight: bold;
				}

				.desc_box {
					font-size: 14px;
					color: #666;
				}
			}

			.right_a {}
		}

		.con_item {
			margin-top: 20px;

			.quanyi {
				display: flex;
				font-size: 16px;
				line-height: 25px;
				font-weight: 500;
				justify-content: center;

				image {
					width: 25px;
					height: 25px;
				}
			}
		}
	}

	.card_item_tt {
		// margin: 10px 15px 10px 15px;
		// border-radius: 16px;
		// padding: 10px 0px 10px 0px;
		// background-color: #FFFFFF;
		// box-shadow: 0 .2rem 1rem rgba(0, 0, 0, .05);
		// transition: .3s all cubic-bezier(0, 1, 0.95, 1.05);
		position: relative;
	}

	.card_item {
		margin-top: 10px;
		box-sizing: border-box;
		// padding: 20px;
		// border-radius: 16px;
		display: block;
		margin-bottom: 20px;
		// background-color: #FFFFFF;
		// box-shadow: 0 .2rem 1rem rgba(0, 0, 0, .05);
		// transition: .3s all cubic-bezier(0, 1, 0.95, 1.05);
		position: relative;
	}

	.title {
		font-weight: bold;
		font-size: 16px;
	}


	.card_detail {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;

		.desc {
			font-size: 16px;
			line-height: 16px;
		}

		.subs {
			color: #666;
			font-size: 14px;
			line-height: 16px;
		}
	}

	.goods_box {
		margin: 15px 0px 15px 0px;
		display: flex;
		justify-content: space-between;

		// margin-bottom: 10px;
		.goods_title {
			color: #666;
			font-size: 14px;
		}

		.goods_name {
			font-size: 14px;
			font-weight: 500;
		}
	}

	.line {
		margin: 20px;
		height: 1px;
		border-bottom: 1px #f8f8f8 solid;
	}

	.text110 {
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
	}


	.botton {
		bottom: 20px;
		position: fixed;
		width: 94%;
		margin-left: 3%;
		border-radius: 44rpx;
		background-color: var(--color-primary);
		// margin: 10px;
		margin-top: 80rpx;
		height: 50px;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.zhanwei {
		height: 120px;
		background-color: #fff;
	}

	.act {
		background: rgba(0, 122, 255, 0.1);
		border-radius: 15px;
	}

	.pay-type-list {
		// margin: 15px;
		margin-bottom: 10px;
	
		.pay-title {
			height: 70upx;
			font-size: 14px;
			line-height: 70upx;
			font-weight: bold;
			// border-bottom: 2upx solid #DDDAD4;
		}
	
		.type-item {
			height: 110upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			position: relative;
			padding: 10px;
			margin-bottom: 15px;
	
			// border-bottom: 2upx solid #DDDAD4;
			.a-img {
				width: 70upx;
				height: 70upx;
				margin-right: 20upx;
			}
		}
	
		.b-b {
			border-bottom: 2upx solid #DDDAD4;
		}
	
		.icon {
			width: 100upx;
			font-size: 52upx;
		}
	
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
	
		.icon-weixinzhifu {
			color: #36cb59;
		}
	
		.icon-alipay {
			color: #01aaef;
		}
	
		.tit {
			font-size: 28upx;
			color: #f97020;
			margin-bottom: 4upx;
		}
	
		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 28upx;
			color: #f97020;
		}
	}
	.btn {
		position: fixed;
		bottom: 0px;
		padding-bottom: 20px;
		width: 100%;
		border-radius: 15px 15px 0px 0px;
		background: #fff;

		.btns {
			margin: 10px;
		}
	}
</style>